<template>
<component ref="subComponentRef" :is="useModel"  :articleList="articleList" :articleTitle="articleTitle"   @selectSort2="selectSort()" @toArticlePage="toArticlePage" :rows="rows" :columns="columns" :title-type="titleType" ></component>
</template>


<script setup>
import layoutSidebar from "@/views/weblogFront/articleCss/layoutSidebar.vue";
import layoutSidebarType from "@/views/weblogFront/articleCss/layoutSidebarType.vue";
import layoutTile from "@/views/weblogFront/articleCss/layoutTile.vue";
import layoutTileType from "@/views/weblogFront/articleCss/layoutTileType.vue";
import layoutPrimary from "@/views/weblogFront/articleCss/layoutPrimary.vue";
import {computed, shallowRef} from "vue";


const emits = defineEmits(['selectSort2','toArticlePage'])
const subComponentRef = ref(null);
const props = defineProps({
  articleList: {
    type: Array,
    default: () => []
  },
  titleType:{
    type:String,
    default:"标题"
  },
  articleTitle:{
    type:String,
    default:""
  },
  rows: {
    type: Number,
    required: true,
  },
  columns: {
    type: Number,
    required: true,
  },
  modelName:{
    type: String,
    required: true,
  }
});


const getSubArticleList = () => {
  console.log("调用了",props.articleTitle)
  subComponentRef.value.selectArticleList()
}

// 暴露组件引用和方法给父组件
defineExpose({
  subComponentRef,
  getSubArticleList
});


const selectSort = () => {
  emits('selectSort2');
};


const toArticlePage=(articleId)=>{
  emits('toArticlePage',articleId);
}


const useModel = computed(() => {
  switch (props.modelName) {
    case "layoutTile":
      return  layoutTile;
    case "layoutTileType":
      return layoutTileType;
    case "layoutSidebar":
      return layoutSidebar;
    case "layoutSidebarType":
      return layoutSidebarType;
    case "layoutPrimary":
      return layoutPrimary;
    default:
      return layoutTile;
  }

});

</script>
